<template>
  <div class="order-management-container">
    <div class="management-header">
      <h2>订单管理</h2>
      <div class="search-filter-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="订单号">
            <el-input v-model="searchForm.orderNumber" placeholder="请输入订单号" clearable style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" maxlength="11" clearable style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.status" placeholder="全部状态" clearable style="width: 150px;">
              <el-option v-for="(value, key) in statusOptions" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                :shortcuts="dateShortcuts"
            ></el-date-picker>
          </el-form-item>
          <div class="search-buttons-container">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <div class="management-content">
      <div class="table-operations">
        <div class="left-operations">
          <el-button type="primary" @click="exportOrders">导出订单</el-button>
          <el-button type="danger" :disabled="!selectedOrders.length" @click="batchOperation('cancel')">
            批量取消
          </el-button>
        </div>
        <div class="right-operations">
          <el-radio-group v-model="activeTab" @change="handleTabChange" size="small">
            <el-radio-button label="all">全部订单</el-radio-button>
            <el-radio-button label="1">待付款</el-radio-button>
            <el-radio-button label="2">待派送</el-radio-button>
            <el-radio-button label="3">已派送</el-radio-button>
            <el-radio-button label="4">已完成</el-radio-button>
            <el-radio-button label="5">已取消</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-table
          v-loading="loading"
          :data="orderList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="number" label="订单号" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column label="用户信息" width="180">
          <template #default="scope">
            <div>{{ scope.row.consignee }}</div>
            <div>{{ scope.row.phone }}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" width="100" align="center">
          <template #default="scope">
            <span class="price-text">¥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" effect="plain">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.orderTime) }}
          </template>
        </el-table-column>
        <el-table-column label="支付时间" width="180">
          <template #default="scope">
            {{ scope.row.checkoutTime ? formatDateTime(scope.row.checkoutTime) : '未支付' }}
          </template>
        </el-table-column>
        <el-table-column label="地址信息" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button
                type="primary"
                size="small"
                @click="showOrderDetail(scope.row)"
                plain
            >
              详情
            </el-button>
            <el-button
                v-if="scope.row.status === 2"
                type="success"
                size="small"
                @click="dispatchOrder(scope.row.id)"
                plain
            >
              派送
            </el-button>
            <el-button
                v-if="scope.row.status === 1"
                type="danger"
                size="small"
                @click="cancelOrder(scope.row.id)"
                plain
            >
              取消
            </el-button>
            <el-button
                v-if="scope.row.status === 1"
                type="warning"
                size="small"
                @click="markAsPaid(scope.row.id)"
                plain
            >
              标记已付
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 订单详情对话框 -->
    <el-dialog
        v-model="detailDialogVisible"
        title="订单详情"
        width="800px"
        destroy-on-close
    >
      <div v-if="currentOrder" class="order-detail">
        <el-descriptions title="订单信息" :column="2" border>
          <el-descriptions-item label="订单编号">{{ currentOrder.number }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusType(currentOrder.status)">
              {{ getStatusText(currentOrder.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ formatDateTime(currentOrder.orderTime) }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">
            {{ currentOrder.checkoutTime ? formatDateTime(currentOrder.checkoutTime) : '未支付' }}
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            {{ currentOrder.payMethod === 1 ? '微信支付' : '支付宝' }}
          </el-descriptions-item>
          <el-descriptions-item label="订单备注" :span="2">
            {{ currentOrder.remark || '无' }}
          </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <el-descriptions title="用户信息" :column="2" border>
          <el-descriptions-item label="收货人">{{ currentOrder.consignee }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentOrder.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="2">{{ currentOrder.address }}</el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <div class="detail-section">
          <h3>商品信息</h3>
          <el-table :data="currentOrder.orderDetails" border style="width: 100%">
            <el-table-column label="商品图片" width="80">
              <template #default="scope">
                <el-image
                    :src="getFullImageUrl(scope.row.image)"
                    :preview-src-list="[getFullImageUrl(scope.row.image)]"
                    style="width: 50px; height: 50px; border-radius: 4px;"
                    fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" min-width="180"></el-table-column>
            <el-table-column label="口味" width="150" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.dishFlavor ? formatFlavor(scope.row.dishFlavor) : '无' }}
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="单价" width="100">
              <template #default="scope">
                ¥{{ scope.row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="number" label="数量" width="80"></el-table-column>
            <el-table-column label="小计" width="100">
              <template #default="scope">
                ¥{{ (scope.row.amount * scope.row.number).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="detail-summary">
          <div class="summary-item">
            <span>商品总额：</span>
            <span>¥{{ getItemsTotal(currentOrder.orderDetails).toFixed(2) }}</span>
          </div>
          <div class="summary-item">
            <span>配送费：</span>
            <span>¥{{ getDeliveryFee(currentOrder).toFixed(2) }}</span>
          </div>
          <div class="summary-total">
            <span>实付金额：</span>
            <span class="total-price">
              {{ (currentOrder.status === 1 || currentOrder.status === 5) ? '¥0.00' : '¥' + currentOrder.amount }}
            </span>
          </div>
        </div>

        <div class="detail-actions">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button
              v-if="currentOrder.status === 2"
              type="success"
              @click="dispatchOrder(currentOrder.id); detailDialogVisible = false"
          >
            派送订单
          </el-button>
          <el-button
              v-if="currentOrder.status === 1"
              type="warning"
              @click="markAsPaid(currentOrder.id); detailDialogVisible = false"
          >
            标记已付
          </el-button>
          <el-button
              v-if="currentOrder.status === 1"
              type="danger"
              @click="cancelOrder(currentOrder.id); detailDialogVisible = false"
          >
            取消订单
          </el-button>
          <el-button type="primary" @click="printOrder">打印订单</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getOrderDetail,
  cancelOrder as apiCancelOrder,
  dispatchOrder as apiDispatchOrder,
  markOrderAsPaid,
  exportOrdersApi, getOrderListByAdmin, batchCancelOrders
} from '@/api/order';
import { fileViewPath } from "@/utils/file";

// 状态选项
const statusOptions = {
  '1': '待付款',
  '2': '待派送',
  '3': '已派送',
  '4': '已完成',
  '5': '已取消'
};

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// 搜索表单
const searchForm = reactive({
  orderNumber: '',
  phone: '',
  status: '',
  dateRange: []
});

// 订单列表数据
const orderList = ref([]);
const loading = ref(false);
const activeTab = ref('all');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedOrders = ref([]);

// 订单详情相关
const detailDialogVisible = ref(false);
const currentOrder = ref(null);

// 获取订单列表
const fetchOrderList = async () => {
  loading.value = true;
  try {
    const params = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      // 修改这里：优先使用搜索表单中的状态，如果没有则使用标签页状态
      status: searchForm.status || (activeTab.value === 'all' ? '' : activeTab.value),
      number: searchForm.orderNumber,
      phone: searchForm.phone
    };

    // 动态添加日期范围参数
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.beginTime = searchForm.dateRange[0];
      params.endTime = searchForm.dateRange[1];
    }

    const res = await getOrderListByAdmin(params);
    if (res.code === '200') {
      orderList.value = res.data.records || [];
      total.value = res.data.total || 0;
    } else {
      ElMessage.error(res.msg || '获取订单列表失败');
    }
  } catch (error) {
    console.error('获取订单列表失败:', error);
    ElMessage.error('获取订单列表失败');
  } finally {
    loading.value = false;
  }
};

// 获取订单详情
const fetchOrderDetail = async (orderId) => {
  try {
    const res = await getOrderDetail(orderId);
    if (res.code === '200') {
      return res.data;
    } else {
      ElMessage.error(res.msg || '获取订单详情失败');
      return null;
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
    ElMessage.error('获取订单详情失败');
    return null;
  }
};

// 显示订单详情
const showOrderDetail = async (order) => {
  // 如果订单已经包含详情信息，直接显示
  if (order.orderDetails && order.orderDetails.length > 0) {
    currentOrder.value = order;
    detailDialogVisible.value = true;
    return;
  }

  // 否则请求详情信息
  const detail = await fetchOrderDetail(order.id);
  if (detail) {
    currentOrder.value = detail;
    detailDialogVisible.value = true;
  }
};

// 取消订单
const cancelOrder = async (orderId) => {
  try {
    await ElMessageBox.confirm(
        '确定要取消该订单吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    );

    const res = await apiCancelOrder(orderId);
    if (res.code === '200') {
      ElMessage.success('订单已取消');
      await fetchOrderList(); // 刷新订单列表
    } else {
      ElMessage.error(res.msg || '取消订单失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消订单失败:', error);
      ElMessage.error('取消订单失败');
    }
  }
};

// 派送订单
const dispatchOrder = async (orderId) => {
  try {
    await ElMessageBox.confirm(
        '确认派送该订单吗？',
        '提示',
        {
          confirmButtonText: '确认派送',
          cancelButtonText: '取消',
          type: 'info'
        }
    );

    const res = await apiDispatchOrder(orderId);
    if (res.code === '200') {
      ElMessage.success('订单已派送');
      await fetchOrderList(); // 刷新订单列表
    } else {
      ElMessage.error(res.msg || '派送订单失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('派送订单失败:', error);
      ElMessage.error('派送订单失败');
    }
  }
};

// 标记订单为已支付
const markAsPaid = async (orderId) => {
  try {
    await ElMessageBox.confirm(
        '确认将该订单标记为已支付吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    );

    const res = await markOrderAsPaid(orderId);
    if (res.code === '200') {
      ElMessage.success('订单已标记为已支付');
      await fetchOrderList(); // 刷新订单列表
    } else {
      ElMessage.error(res.msg || '操作失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('标记订单失败:', error);
      ElMessage.error('标记订单失败');
    }
  }
};

// 批量操作
const batchOperation = async (type) => {
  if (selectedOrders.value.length === 0) {
    ElMessage.warning('请先选择订单');
    return;
  }

  const orderIds = selectedOrders.value.map(order => order.id);

  try {
    if (type === 'cancel') {
      await ElMessageBox.confirm(
          `确定要取消选中的 ${orderIds.length} 个订单吗？`,
          '批量取消',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      );

      // 调用批量取消API
      const res = await batchCancelOrders(orderIds);
      if (res.code === '200') {
        ElMessage.success('批量取消成功');
        await fetchOrderList();
      } else {
        ElMessage.error(res.msg || '批量取消失败');
      }
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量操作失败:', error);
      ElMessage.error('批量操作失败');
    }
  }
};

// 导出订单
const exportOrders = async () => {
  try {
    const params = {
      orderNumber: searchForm.orderNumber,
      phone: searchForm.phone,
      status: activeTab.value === 'all' ? '' : activeTab.value
    };

    // 添加日期范围
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.beginTime = searchForm.dateRange[0];
      params.endTime = searchForm.dateRange[1];
    }

    // 调用API导出订单
    const res = await exportOrdersApi(params);
    if (res.code === '200') {
      ElMessage.success('订单导出成功');
    } else {
      ElMessage.error(res.msg || '导出订单失败');
    }
  } catch (error) {
    console.error('导出订单失败:', error);
    ElMessage.error('导出订单失败');
  }
};

// 打印订单
const printOrder = () => {
  if (!currentOrder.value) return;

  // 创建打印内容
  const printContent = document.createElement('div');
  printContent.innerHTML = `
    <div style="padding: 20px; font-family: Arial, sans-serif;">
      <h2 style="text-align: center; margin-bottom: 20px;">订单详情</h2>
      <div style="margin-bottom: 20px;">
        <p><strong>订单编号：</strong>${currentOrder.value.number}</p>
        <p><strong>下单时间：</strong>${formatDateTime(currentOrder.value.orderTime)}</p>
        <p><strong>订单状态：</strong>${getStatusText(currentOrder.value.status)}</p>
      </div>
      <div style="margin-bottom: 20px;">
        <p><strong>收货人：</strong>${currentOrder.value.consignee}</p>
        <p><strong>联系电话：</strong>${currentOrder.value.phone}</p>
        <p><strong>收货地址：</strong>${currentOrder.value.address}</p>
      </div>
      <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
        <thead>
          <tr style="background-color: #f2f2f2;">
            <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">商品名称</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center;">单价</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: center;">数量</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: right;">小计</th>
          </tr>
        </thead>
        <tbody>
          ${currentOrder.value.orderDetails.map(item => `
            <tr>
              <td style="padding: 10px; border: 1px solid #ddd; text-align: left;">${item.name}</td>
              <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">¥${item.amount}</td>
              <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">${item.number}</td>
              <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">¥${(item.amount * item.number).toFixed(2)}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
      <div style="text-align: right; margin-bottom: 10px;">
        <p><strong>商品总额：</strong>¥${getItemsTotal(currentOrder.value.orderDetails).toFixed(2)}</p>
        <p><strong>配送费：</strong>¥${getDeliveryFee(currentOrder.value).toFixed(2)}</p>
        <p style="font-size: 18px;"><strong>实付金额：</strong>¥${currentOrder.value.amount}</p>
      </div>
    </div>
  `;

  // 创建打印窗口
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
      <head>
        <title>打印订单 - ${currentOrder.value.number}</title>
      </head>
      <body>
        ${printContent.innerHTML}
        <script>
          window.onload = function() {
            window.print();
            window.setTimeout(function() { window.close(); }, 500);
          }
      </body>
    </html>
  `);
  printWindow.document.close();
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedOrders.value = selection;
};

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchOrderList();
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    if (key === 'dateRange') {
      searchForm[key] = [];
    } else {
      searchForm[key] = '';
    }
  });
  currentPage.value = 1;
  fetchOrderList();
};

// 处理标签页切换
const handleTabChange = () => {
  currentPage.value = 1;
  fetchOrderList();
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchOrderList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchOrderList();
};

// 获取订单状态文本
const getStatusText = (status) => {
  return statusOptions[status] || '未知状态';
};

// 获取订单状态对应的类型
const getStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'primary',
    3: 'success',
    4: 'info',
    5: 'danger'
  };
  return typeMap[status] || 'info';
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${formatDate(dateStr)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
};

// 格式化口味信息
const formatFlavor = (flavorJson) => {
  try {
    const flavors = JSON.parse(flavorJson);
    return Object.entries(flavors)
        .map(([key, value]) => `${key}: ${value}`)
        .join(', ');
  } catch (e) {
    return flavorJson;
  }
};

// 获取图片完整URL
const getFullImageUrl = (imagePath) => {
  if (!imagePath) return '';
  return `${fileViewPath}${formatImagePath(imagePath)}`;
};

// 格式化图片路径
const formatImagePath = (path) => {
  if (!path) return '';
  return path.replace(/\\/g, '/');
};

// 计算订单中的商品总金额
const getItemsTotal = (items) => {
  if (!items || items.length === 0) return 0;
  return items.reduce((sum, item) => sum + (item.amount * item.number), 0);
};

// 计算配送费
const getDeliveryFee = (order) => {
  // 如果订单已取消，配送费显示为0
  if (order.status === 5) {
    return 0;
  }

  // 如果订单未支付，配送费也显示为0
  if (order.status === 1) {
    return 0;
  }

  // 正常订单计算配送费
  const itemsTotal = getItemsTotal(order.orderDetails);
  return order.amount - itemsTotal;
};

// 组件挂载时获取订单列表
onMounted(() => {
  fetchOrderList();
});
</script>

<style scoped>
.order-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.management-header {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.management-header h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 22px;
  font-weight: bold;
}

.search-filter-section {
  margin-top: 20px;
  position: relative;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
}

.search-form .el-form-item {
  margin-right: 0;
  margin-bottom: 15px;
}

.search-buttons-container {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .search-form {
    justify-content: space-between;
  }

  .search-form .el-form-item {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  .search-buttons-container {
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .search-form .el-form-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .search-form .el-input,
  .search-form .el-select,
  .search-form .el-date-editor {
    width: 100% !important;
  }
}

.management-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.table-operations {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.left-operations, .right-operations {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.price-text {
  color: #ff6b6b;
  font-weight: bold;
}

/* 订单详情样式 */
.order-detail {
  padding: 10px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eee;
}

.detail-summary {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.summary-item {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  color: #666;
}

.summary-item span:first-child {
  margin-right: 20px;
}

.summary-total {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  font-weight: bold;
}

.summary-total span:first-child {
  margin-right: 20px;
}

.total-price {
  color: #ff6b6b;
  font-size: 18px;
}

.detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .order-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-address {
    margin-bottom: 10px;
  }

  .order-total {
    margin: 10px 0;
  }

  .order-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>